<template>
    <div>
        <h2>HOME PAGE</h2>
        <p>firstName:{{ info.firstName }}</p>
        <p>lastName:{{ info.lastName }}</p>
        <p>fullName:{{ fullName }}</p>
        <button @click="changeName">changeName</button>
    </div>
</template>

<script>
import { reactive, ref, computed } from "vue"

export default {
    name: "Home",
    /*computed:{
        fullName:{
            get:()=>{
                return info.firstName + "_" + info.lastName
            },
            set:(newValue)=>{
                let names = newValue.split("_");
                info.firstName = names[0]
                info.lastName = names[1]
            }
        }
    },*/
    setup() {
        let info = reactive({
            firstName: "AA",
            lastName: "BB"
        })

        //compositionAPI中的computed
        //1.computedAPI接受一个getter函数 并且返回一个ref对象(readonly只读);
        // let fullName = computed(()=>{
        //     return info.firstName + "_" + info.lastName
        // })
        //2.computedAPI接受一个具有get和set方法的对象,返回值也是一个ref对象(可读写)
        let fullName = computed({
            get:()=>{
                return info.firstName + "_" + info.lastName
            },
            set:(newValue)=>{
                let names = newValue.split("_");
                info.firstName = names[0]
                info.lastName = names[1]
            }
        })

        function changeName(){
            fullName.value = "CC_DD"
        }
        return {
            info,
            fullName,
            changeName
        }
    },
}
</script>

<style scoped>

</style>